import { useMemo, useCallback } from "react";
import { Image, View, Text } from "@tarojs/components";
import { FC } from "@tarojs/taro";
import { deviceDefaultName } from "@/models/deviceList";
import languageModal from "@/models/language";
import { getItemForPk } from "@/config/product";
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";
import CheckBox from '@/components/CheckBox';
import CircleAddButton from '@/components/CircleAddButton';
import { goToFail } from '../../models/configTool';
import TimeLoading from './TimeLoading';
import failIcon from '../../assets/found_icon_tips.png';
import refreshIcon from '../../assets/add_icon_refresh.png';
import configWifi from "../../models/configWifi";

const dstyles = GStyleSheet.create({
  container: {
    justifyContent: "space-between",
    height: "100rpx",
    backgroundColor: DynamicColors.screenBackgroundGaryColor,
    borderRadius: "8px",
    boxSizing: "border-box",
    padding: "30rpx",
    marginBottom: '30rpx'
  },
  icon: {
    width: "70rpx",
    height: "70rpx",
  },
  text: {
    fontSize: 16,
    color: DynamicColors.normalTextColor,
  },
  left: {
    display: "flex",
    alignItems: "center",
    gap: "12rpx",
  },
  stateIcon: {
    width: "50rpx",
    height: "50rpx",
    marginLeft: 10,
  }
});

export enum ConfigStateEnum {
  ready = 1,
  preLoading,
  loading,
  success,
  fail
}

export interface IStateClick {
  device: IDevice;
  state: ConfigStateEnum,
}

interface IProps {
  device: IDevice;
  state: ConfigStateEnum,
  onStateClick: (p: IStateClick) => void;
  goToFailFun?: () => void;
  addView?: any;
}


export const configDeviceTime = 60
const defaultConfigTime = (configDeviceTime + 1) * 1000

const DeviceItem: FC<IProps> = ({ device, state, onStateClick, goToFailFun, addView }) => {

  const styles = dstyles.useDynamicStyle()

  const productInfo = useMemo(() => {
    return getItemForPk(device.productKey) || {}
  }, [device.productKey])

  const name = useMemo(() => {
    return deviceDefaultName(device, languageModal)
  }, [device.productKey])

  const onClick = useCallback(() => {
    configWifi.curPk = device.productKey
    onStateClick({ device, state })
  }, [device, state, onStateClick])

  const goToFailPage = useCallback(() => {
    if (goToFailFun) {
      goToFailFun()
    } else {
      goToFail(true)
    }
  }, [goToFailFun])

  const stateView = useMemo(() => {
    switch (state) {
      case ConfigStateEnum.preLoading:
        return <TimeLoading timeout={defaultConfigTime} finish={false} start={false} showReact={false} />
      case ConfigStateEnum.loading:
        return <TimeLoading timeout={defaultConfigTime} finish={false} start showReact={false} />
      case ConfigStateEnum.fail:
        return <View className='centerFlex' style={{ justifyContent: 'flex-end' }}>
          <Image src={failIcon} style={styles.stateIcon} onClick={goToFailPage} />
          {/* <Image src={refreshIcon} style={styles.stateIcon} onClick={onClick} /> */}
        </View>
      case ConfigStateEnum.success:
        return <CheckBox checked />
      default:
        return addView ? <View onClick={onClick}>{addView}</View> : <CircleAddButton id={`ADD_DEVICE_${device.mac.toLocaleUpperCase()}`} onClick={onClick} />
    }

  }, [styles, goToFailPage, onClick, state, addView])

  return (
    <View style={styles.container} className='centerFlex'>
      <View style={styles.left}>
        <Image style={styles.icon} src={productInfo.icon} />
        <Text style={styles.text} >{name}</Text>
      </View>
      <View className='centerFlex'>
        {stateView}
      </View>
    </View>
  );
};

export default DeviceItem;
